//删除
const del = require('del');


//html
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');

//js
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')

//服务器
const connect = require('gulp-connect');
//代理跨域
const proxy = require('http-proxy-middleware');

//css
const cleanCss = require('gulp-clean-css')
const autoPrefixer  = require('gulp-autoPrefixer')
const sass = require('gulp-sass')

const paths = {
    html: {
        src: 'src/**/*.html', // src下面的所有文件夹下的所有html文件，下面的js，css以此类推
        dest: 'dist' // 处理的结果放到dist目录
    },
    css: {
        src: 'src/css/**/*.scss', // src下面css目录里的所有文件夹下的所有css文件
        dest: 'dist/css' // 处理的结果放到dist下的css目录里
    },
    js: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    img: {
        src: 'src/imgs/**/*',
        dest: 'dist/imgs'
    },
    libs: {
        src: 'src/libs/**/*',
        dest: 'dist/libs'
    },
    ico: {
        src: 'src/favicon.ico',
        dest: 'dist'
    }
}

//删除dist的任务
const delDist = ()=>del('dist');

const html =()=>{
    return gulp.src(paths.html.src)
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS 
        }))
        .pipe(gulp.dest(paths.html.dest))
        .pipe(connect.reload())
}

const js = () => {
    return gulp.src(paths.js.src)
        .pipe(babel({
        	presets: ['@babel/env']
    	}))
        // .pipe(uglify())
        .pipe(gulp.dest(paths.js.dest))
        .pipe(connect.reload())
}


//给需要兼容的css样式自动加上兼容性前缀
const css = () => {
    return gulp.src(paths.css.src)
        .pipe(sass())
        .pipe(autoPrefixer({
            presets:['@babel/env']
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest(paths.css.dest))
        .pipe(connect.reload())
}

//img任务 ：将src的图片全部移动到dist即可
const img  = ()=> gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest));

//libs任务 ：将libs的文件全部移动到dist即可
const libs  = ()=> gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest));

//上面基本的都已经实现 实现watch任务:监听代码改变自动重启当前任务
const watch = ()=>{
    //监听html文件，当文件改变就自动重启html任务
    gulp.watch(paths.html.src,html)
    gulp.watch(paths.css.src, css)
    gulp.watch(paths.js.src, js)
}

//开启服务器
const server =()=>{
    connect.server({
        root:'dist',//项目根路径是dist
        livereload:true,//服务器支持热更新 
        port:2333,//配置端口号

        // 配置代理  https://apps.game.qq.com/daoju/v3/zb/client/category/CategoryApp.php?output_format=jsonp&opt_type=category_list&biz=wuxia&_=1598059788562
        middleware(){
            return[
                proxy.createProxyMiddleware('/api',{
                    target:'https://apiv2.pinduoduo.com',
                    changeOrigin:true
                })
            ]
        }


        // middleware () {
        //     // 代理跨域：把以/api开头的请求代理到拼多多的接口
        //     return [
        //       proxy.createProxyMiddleware('/api', {
        //         target: 'https://apiv2.pinduoduo.com',
        //         changeOrigin: true
        //       })
        //     ]
        //   }
    })
}

// ico任务：把ico图标移动到dist
const ico = () => gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))

//最后这把指定的任务导出
//default为默认任务
//series是同步代码：先删除了dust才能启动其他任务
module.exports.default = gulp.series(delDist,gulp.parallel(html,css,js,img,libs,watch,server,ico))

